<template>
    <div id="downChuangzuo">
        <el-row>
            <el-col :xs="24" class="bgStyle">
                <img src="../../assets/下载创作-header.png" alt="">
                <div class="logo-down">
                    <img src="../../assets/misc-logo.805143dd.png" alt="">
                    <h2>创作你的创作</h2>
                    <p>一个优质的创作社区</p>
                    <el-button type="success" class="el-icon-user-solid">Android下载</el-button>
                </div>
                <div class="cont">
                    <img src="../../assets/下载创作-cont1.png" alt="">
                    <hr/>
                    <div>
                        <h2>轻松创作精美图文</h2>
                        <p>简单优雅的设计，可以一次上传多张图片、实时保存、多端同步，使创作分享更方便快捷</p>
                        <img src="../../assets/下载创作-cont2.png" alt="">
                    </div>
                    <div>
                        <h2>多元化的创作社区</h2>
                        <p>一篇短文、一首诗、一幅画，在这里，你的创作将得到全世界的赞赏</p>
                        <img src="../../assets/下载创作-cont3.png" alt="">
                    </div>
                    <div>
                        <h2>百万创作者在简书相遇</h2>
                        <p>在简书，仍有数百万创作者在坚持产出优质创作，有数千万读者在用心交流创作；众多精彩创作，只在简书看得到</p>
                        <img src="../../assets/下载创作-cont4.png" alt="">
                    </div>
                    <div>
                        <h2>自由地交流和沟通</h2>
                        <p>你可以发表评论、沟通想法。觉得不够？还能给创作者发简信，和无数传遍中文互联网的创作者直接交流</p>
                        <img src="../../assets/下载创作-cont5.png" alt="">
                    </div>
                </div>
                <img src="../../assets/下载创作-header.png" alt="">
                <div class="logo-down" style="margin-top: -60px">
                    <el-row>
                        <el-col :span="6" :offset="4" style="line-height: 78px">
                            <img style="width: 64px;height: 64px" src="../../assets/misc-logo.805143dd.png" alt="">
                        </el-col>
                        <el-col :span="14" style="text-align: left">
                            <h2>创作你的创作</h2>
                            <p>一个优质的创作社区</p>
                        </el-col>
                        <el-button style="margin-top: 30px" type="success" class="el-icon-user-solid">Android下载
                        </el-button>
                    </el-row>
                    <router-link to="/" style="margin: 20px 0 30px 0;display: block;font-size: 15px;color: #999999">
                        去看看热门文章 <i class="el-icon-arrow-right"></i></router-link>
                </div>
            </el-col>
        </el-row>
        <div class="Goback hiddem-xs-only">
            <li class="hidden-sm-and-up yd-fanhui" :class="{'actives':index === isActives}" @click="changeTabs(index)">
                <router-link to="/yd-wode"><p><i class="el-icon-back"></i></p></router-link>
            </li>
        </div>
    </div>
</template>

<script>
    export default ({
        name: 'downChuangzuo',
        date() {
            return {
                bgStyle: {
                    backgroundImage: ''
                }
            }
        },
        methods: {
            changeTabs(index) {
                this.isActives = index;
            }
        },
    })
</script>

<style scoped>
    #downChuangzuo {
        text-align: center;
    }

    .bgStyle img {
        width: 95%;
        height: 80px;
    }

    .bgStyle img:nth-of-type(2) {
        margin-top: 50px;
    }

    .logo-down {
        width: 100%;
    }

    .logo-down img {
        width: 100px;
        height: 100px;
    }

    .logo-down h2, p, button {
        margin: 10px;
    }

    .logo-down p {
        font-size: 15px;
        color: #333333;
    }

    .logo-down button {
        font-size: 18px;
        width: 240px;
        padding: 10px;
    }

    .cont {
        width: 100%;
        padding-top: 80px;
    }

    .cont img {
        width: 80%;
        height: auto;
    }

    .cont hr {
        width: 99%;
        height: 20px;
        background-color: #fff;
        border-top: 1px solid #eee;
        box-shadow: 0 -15px 8px 0px rgba(65, 65, 65, 0.1);
    }

    .cont h2 {
        font-size: 24px;
        font-weight: 400;
        color: #333333;
    }

    .cont p {
        color: #333333;
        padding: 10px 20px 25px;
        line-height: 25px;
        font-size: 15px;
        font-weight: 300;
    }

    .cont div {
        padding: 50px 0 20px 0;
        border-bottom: 1px solid #eee;
    }

    .actives {
        background-color: #f0f0f0;
        color: #ff4f4c;
    }

    .Goback li {
        text-align: center;
        line-height: 25px;
        position: fixed;
        bottom: 30px;
        left: 30px;
        background-color: #b3b3b3;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        font-size: 35px;
        opacity: 0.7;
    }

    .Goback li i {
        color: #fff;
    }
</style>